// ---------------------------- 查询学员列表数据并渲染到表格 ----------------------------
async function renderStudent() {
  const { data: res } = await axios.get('/students')
  // console.log(res)
  let arr = res.data.map(item => {
    return `
      <tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender ? '女' : '男'}</td>
        <td>第${item.group}组</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province} ${item.city} ${item.area}</td>
        <td>
          <a href="javascript:;" class="text-success mr-3">
            <i data-id="${item.id}" class="bi bi-pen"></i>
          </a>
          <a href="javascript:;" class="text-danger">
            <i data-id="${item.id}" class="bi bi-trash"></i>
          </a>
        </td>
      </tr>
    `
  })
  // console.log(arr.join(''))
  document.querySelector('tbody').innerHTML = arr.join('')
  document.querySelector('.total').innerHTML = arr.length
}

renderStudent()


// ---------------------------------- 初始化模态框 
// let 变量 = new bootstrap.Modal(模态框盒子)
// 变量.show() // 让模态框显示
// 变量.hide() // 让模态框隐藏

let modal = new bootstrap.Modal(document.querySelector('#modal'))

// ---------------------------------- 点击 + ，让模态框显示 -----------------------------
document.querySelector('#openModal').addEventListener('click', function () {
  modal.show() // 让模态框显示
  document.querySelector('#modal h5.modal-title').innerHTML = '添加学员' // 修改标题为 “添加学员”
  document.querySelector('#form').reset() // 重置表单
})

// ---------------------------------- 省市县联动效果 
// 找到三个下拉框
let province = document.querySelector('[name=province]')
let city = document.querySelector('[name=city]')
let area = document.querySelector('[name=area]')

// 获取省，并渲染
async function getProvince() {
  const { data: res } = await axios.get('/api/province')
  // console.log(res)
  let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
  province.innerHTML = '<option value="">--省份--</option>' + arr.join('')
}
// 获取市，并渲染
async function getCity() {
  // 无论切换到 河南省、山西省、--省份--、河北省.....，总是要重置县
  area.innerHTML = '<option value="">--地区--</option>'
  // 如果选择了空的省，重置城市
  if (province.value === '') {
    city.innerHTML = '<option value="">--城市--</option>'
    return
  }
  const { data: res } = await axios.get('/api/city', { params: { pname: province.value } })
  // console.log(res)
  let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
  city.innerHTML = '<option value="">--城市--</option>' + arr.join('')
}
// 获取县，并渲染
async function getArea() {
  if (city.value === '') {
    area.innerHTML = '<option value="">--地区--</option>'
    return
  }
  const { data: res } = await axios.get('/api/area', { params: { pname: province.value, cname: city.value } })
  // console.log(res)
  let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
  area.innerHTML = '<option value="">--地区--</option>' + arr.join('')
}

// 进入页面，马上获取省
getProvince()
// 切换省的时候，获取对应的市，并渲染
province.addEventListener('change', getCity)
// 切换城市的时候，获取对应的县，并渲染
city.addEventListener('change', getArea)


// -------------------------------------- 提交模态框中的表单 
document.querySelector('#submit').addEventListener('click', async function (e) {
  e.preventDefault()
  // 获取表单数据
  let data = val(document.querySelector('#form'))
  // 把字符串类型的数字，转成真的数字
  data.age = Number(data.age)
  data.gender = +data.gender // + 和变量连在一起
  data.group = +data.group
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary
  // console.log(data)
  // Ajax提交，判断一下，提交到添加接口还是修改接口
  let title = document.querySelector('#modal h5.modal-title')
  if (title.innerHTML === '添加学员') {
    const { data: res } = await axios.post('/students', data)
    // console.log(res)
    message.success(res.message) // 提示
  } else {
    // 修改学员
    let id = title.dataset.id
    const { data: res } = await axios.put(`/students/${id}`, data)
    message.success(res.message) // 提示
  }

  modal.hide() // 关闭弹出层
  renderStudent() // 重新获取全部学员
})


// ----------------------------- 点击修改和删除 
// 修改、删除 按钮，都是动态创建的元素
// 给这样的元素添加事件，需要用事件委托
document.querySelector('tbody').addEventListener('click', async function (e) {
  // 判断，符合条件（点击的元素包含 bi-trash 类），说明点击的是删除
  if (e.target.classList.contains('bi-trash')) {
    if (!confirm('确定要删除吗？')) return
    // console.log('点了删除')
    let id = e.target.dataset.id
    // console.log(id)
    // 发送请求删除（接口没有响应结果，所以不用接收响应结果了）
    await axios({
      method: 'DELETE',
      // url: '/students/:id'
      url: `/students/${id}`
    })
    message.success('删除成功') // 提示
    renderStudent() // 更新页面中的数据
  }

  // 判断，符合条件（点击的元素包含 bi-pen 类），说明点击的是修改
  if (e.target.classList.contains('bi-pen')) {
    // console.log('点击了修改')
    // 点击了修改，要做数据回填，做数据回填，前提是得有数据才行
    let id = e.target.dataset.id
    // console.log(id)
    const { data: res } = await axios.get(`/students/${id}`)
    console.log(res)
    // 让模态框显示
    modal.show()
    // 修改模态框的标题
    let title = document.querySelector('#modal h5.modal-title')
    title.innerHTML = '修改学员' // 修改模态框的标题
    title.setAttribute('data-id', id)
    // 获取城市、县
    province.value = res.data.province
    await getCity()
    city.value = res.data.city
    await getArea()
    // 使用插件做数据回填
    // val(表单, 数据)
    val(document.querySelector('#form'), res.data)
  }
})